<template>
	<section>
		<div class="columns">
			<div class="column is-full">
				<el-card class="box-card" shadow="never">
					<div slot="header" class="clearfix">
						<span><i class="fa fa fa-book"> 帖子 / 编辑 </i></span>
					</div>
					<div>
						<el-form ref="updatePostForm" :model="updatePostFormModel" class="demo-topic">
							<!-- 帖子标题 -->
							<el-form-item prop="title">
								<el-input v-model="updatePostFormModel.title" placeholder="输入新的主题名称" />
							</el-form-item>

							<!-- 帖子内容 -->
							<div id="vditor"></div>

							<!-- 帖子标签 -->
							<b-taginput
								v-model="tags"
								class="my-3"
								maxlength="15"
								maxtags="3"
								ellipsis
								placeholder="请输入主题标签，限制为 15 个字符和 3 个标签"
							/>

							<!-- 更新 & 重置按钮 -->
							<el-form-item class="mt-3">
								<el-button type="primary" @click="handleUpdate()">更新</el-button>
								<el-button @click="resetForm('updatePostForm')">重置</el-button>
							</el-form-item>
						</el-form>
					</div>
				</el-card>
			</div>
		</div>
	</section>
</template>

<script>
import { fetchPostById, updatePost } from "@/api/post";
import Vditor from "vditor";
import "vditor/dist/index.css";

export default {
  	name: "PostEdit",

	data() {
		return {
			updatePostFormModel: {},
			tags: []
		}
	},

	created() {
		// 在当前 Edit 实例创建时，就拿到 topic 的内容
		this.getPostById();
	},

	methods: {
		// 渲染 vditor
		renderMarkdown(md) {
			this.contentEditor = new Vditor("vditor", {
				height: 460,
				placeholder: "输入要更新的内容",
				preview: {
					hljs: { style: 'monokai' },
				},
				mode: 'sv',

				// 当 markdown 都渲染完毕，则执行 after 函数
				after: () => {
					this.contentEditor.setValue(md);
				}
			})
		},

		// 在当前 Edit 组件实例创建时就获取当前的 post 用于回显
		getPostById() {
			// postId 从当前 Edit 组件对应的路由对象中拿到
			// 而路由对象中的 topicId 从 Detail 组件中拿到
			fetchPostById(this.$route.params.postId).then((value) => {
				// 拿到 post (包含 postId) 赋值给 updatePostFormModel 
				this.updatePostFormModel = value.data.post
				// 拿到 tags 
				this.tags = value.data.tags.map(tag => tag.tagName)
				// 渲染 vditor 内容
				this.renderMarkdown(this.updatePostFormModel.content)
			})
		},

		// 更新帖子
		async handleUpdate() {
			// 获取 Vditor 中修改的内容
			this.updatePostFormModel.content = this.contentEditor.getValue();

			// 更新帖子 (post 和 tags)，然后返回更新后的帖子对象
			const { data } = await updatePost({ post: this.updatePostFormModel, tags: this.tags })
		
			// 帖子修改成功后返回帖子详情页
			setTimeout(() => {
				this.$router.push({ name: "post-detail", params: { postId: data.id } })
			}, 800)
		},

		// 重置修改表单
		resetForm(formName) {
			this.$refs[formName].resetFields()
			this.contentEditor.setValue('')
			this.tags = ''
    	}
  	}
}
</script>

<style>
.vditor-reset pre > code {
  font-size: 100%;
}
</style>
